﻿<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 常用模板指令</title>
    <script src="../Scripts/jquery.js"></script>
    <script src="../Scripts/angular.js"></script>
    <link rel="stylesheet" href="../Css/bootstrap.css">
    <link rel="stylesheet" href="../Css/bootstrap-theme.css">
    <style>
        li {
            float: left;
        }

        .red {
            background: red;
        }

        .green {
            background: green;
        }

        input.ipt-in-table {
            border: 0;
            border-bottom: 1px solid silver;
            width: 50px;
            margin-left: 10px;
            text-align: center;
        }
        h1 {
        	text-align: center;
        }
    </style>
</head>
<body style="padding-top: 5px;" ng-controller="demo">
<h1>AngularJS常用模板标记（指令）</h1>
<div class="container container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <table class="table table-bordered table-responsive">
                <thead>
                <tr>
                    <td style="width:30px;">指令名</td>
                    <td style="width: 200px;">数据</td>
                    <td style="width: 200px;">效果</td>
                </tr>
                </thead>
                <tbody>

                <tr>
                    <td colspan="3">数据相关</td>
                </tr>
                <tr>
                    <td>插值表达式:{{'\{\{\}\}'}}</td>
                    <td><input type="text" ng-model="data.insertExpr"></td>
                    <td>{{data.insertExpr}}</td>
                </tr>
                <tr>
                    <td>数据绑定：ng-bind</td>
                    <td><input type="text" ng-model="data.ngBind"></td>
                    <td>{{data.ngBind}}</td>
                </tr>
                <tr>
                    <td>表单控件双向绑定：ng-model</td>
                    <td><input type="text" ng-model="data.ngModel"></td>
                    <td><input type="text" ng-model="data.ngModel"></td>
                </tr>

                <tr>
                    <td colspan="3">样式相关</td>
                </tr>

                <tr>
                    <td>绑定CSS类：ng-class</td>
                    <td>{
                        <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;red&nbsp;:&nbsp;<input class="ipt-in-table" type="text"
                                                                       ng-model="data.ngClass.red">,
                        <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;green&nbsp;:&nbsp;<input class="ipt-in-table" type="text"
                                                                         ng-model="data.ngClass.green">
                        <br>
                        }
                    </td>
                    <td>
                        <div ng-class="{red : data.ngClass.red == 'true', green:data.ngClass.green == 'true' }">demo
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>绑定内联样式：ng-style</td>
                    <td>{
                        <br>
                        &nbsp;&nbsp;&nbsp;&nbsp; "background-color"&nbsp;:&nbsp;<input class="ipt-in-table" type="text"
                                                                                       ng-model="data.ngStyle.backgroundColor">,
                        <br>
                        &nbsp;&nbsp;&nbsp;&nbsp; "border"&nbsp;:&nbsp;<input type="text" class="ipt-in-table"
                                                                             style="width: 120px"
                                                                             ng-model="data.ngStyle.border">
                        <br>
                        }
                    </td>
                    <td>
                        <div ng-style='data.ngStyle'>demo</div>
                    </td>
                </tr>
                <tr>
                    <td>只读：ng-readonly</td>
                    <td><input type="checkbox" ng-model="data.ngReadonly"></td>
                    <td><input type="text" ng-readonly="data.ngReadonly" value="只读测试"></td>
                </tr>
                <tr>
                    <td>不可用：ng-disable</td>
                    <td><input type="checkbox" ng-model="data.ngDisable"></td>
                    <td><input type="text" ng-readonly="data.ngDisable" value="不可用测试"></td>
                </tr>
                <tr>
                    <td>隐藏：ng-hide</td>
                    <td><input type="checkbox" ng-model="data.ngHide"></td>
                    <td>
                        <div type="text" ng-hide="data.ngHide">ng-hide测试(类似还有ng-show，效果相反，不作演示)</div>
                    </td>
                </tr>

                <tr>
                    <td colspan="3">事件绑定相关</td>
                </tr>
                <tr>
                    <td>点击：ng-click</td>
                    <td>
                        <button ng-click="action.handleEvent('ng-click','click')">点击事件</button>
                    </td>
                    <td>
                        <div id="click">----</div>
                    </td>
                </tr>
                <tr>
                    <td>双击：ng-dblclick</td>
                    <td>
                        <button ng-dblclick="action.handleEvent('ng-dblclick','dblclick')">双击事件</button>
                    </td>
                    <td>
                        <div id="dblclick">----</div>
                    </td>
                </tr>
                <tr>
                    <td>获得焦点：ng-focus</td>
                    <td>
                        <input type="text" ng-focus="action.handleEvent('ng-focus','focus')"/>
                    </td>
                    <td>
                        <div id="focus">----</div>
                    </td>
                </tr>
                <tr>
                    <td>失去焦点：ng-blur</td>
                    <td>
                        <input type="text" ng-blur="action.handleEvent('ng-blur','blur')"/>
                    </td>
                    <td>
                        <div id="blur">----</div>
                    </td>
                </tr>
                <tr>
                    <td>数据改变：ng-change</td>
                    <td>
                        <input type="text" ng-model="data.ngChangeData"
                               ng-change="action.handleEvent('ng-change','change')"/>
                    </td>
                    <td>
                        <div id="change">----</div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">仿流程控制相关</td>
                </tr>
                <tr>
                    <td>如果：ng-if</td>
                    <td>
                        <input type="checkbox" ng-model="data.ngIf">
                    </td>
                    </td>
                    <td>
                        <div ng-if="data.ngIf"> ng-if</div>
                    </td>
                </tr>
                <tr>
                    <td>选项：ng-switch</td>
                    <td>
                        a:<input type="radio" value="a" ng-model="data.ngRadio">&nbsp;
                        b:<input type="radio" value="b" ng-model="data.ngRadio">&nbsp;
                        c:<input type="radio" value="c" ng-model="data.ngRadio">&nbsp;
                        d:<input type="radio" value="d" ng-model="data.ngRadio">&nbsp;
                    </td>
                    </td>
                    <td>
                        <div ng-switch="data.ngRadio">
                            <div ng-switch-when="a"> switch to a</div>
                            <div ng-switch-when="b"> switch to b</div>
                            <div ng-switch-when="c"> switch to c</div>
                            <div ng-switch-default> switch default!</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>循环：ng-repeat</td>
                    <td>
                        {{data.ngRepeat | json}}
                    </td>
                    </td>
                    <td>
                        <table class="table table-responsive table-bordered">
                            <tr ng-repeat="info in data.ngRepeat">
                                <td>{{info.name}}</td>
                                <td>{{info.age}}</td>
                                <td>{{info.sex}}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>


<script src="../Scripts/bootstrap.js"></script>
<script>
    var data = {};
    data.insertExpr = '插值表达式';
    data.ngBind = 'ng-bind';
    data.ngModel = 'ng-model';
    data.ngClass = {
        "red": "true",
        "green": "false"
    };
    data.ngStyle = {
        "backgroundColor": "silver",
        "border": "3px solid green"
    };
    data.ngReadonly = true;
    data.ngDisable = true;
    data.ngHide = true;

    data.ngChangeData = 'ngChange事件的数据';

    data.ngIf = true;

    data.ngRepeat = [{name: '张三', age: 24, sex: "男"}, {name: '李四', age: 19, sex: "女"}, {name: '王五',age: 32,sex: "女"}, {name: '赵六', age: 14, sex: "男"}]

    var actions = {};
    actions.handleEvent = function (evtname, elementId) {
        $("#" + elementId).html(evtname);
    };

    angular.module('app',[])
            .controller('demo',function($scope){
                $scope.data = data;
                $scope.action = actions;
            });


</script>
</body>
</html>